<template>
  <div class="chart-container">
    <trend></trend>
    <!-- 第二行  -->
    <el-row class="mt-20" :gutter="20">
      <el-col :span="16">
        <!-- 日金额分析图 -->
        <dailAmount></dailAmount>
      </el-col>
      <el-col :span="8">
        <!-- 日历图 -->
        <canlender></canlender>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row class="mt-20" :gutter="20">
      <el-col :span="6">
        <!-- 左侧内容 -->
        <div class="chart-map-left">
          <!-- 饼图 -->
          <pie></pie>
          <!-- 文档云图 -->
          <clound class="mt-20"></clound>
        </div>
      </el-col>
      <el-col :span="18">
        <!-- 地图可视化 -->
        <mapview></mapview>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { initDynamanicRouter } from "@/router";
import trend from "./chartcomponents/trend.vue";
import canlender from "./chartcomponents/canlender.vue";
import dailAmount from "./chartcomponents/dailAmount.vue";
import pie from "./chartcomponents/pie.vue";
import clound from "./chartcomponents/clound.vue";
import mapview from "./chartcomponents/mapview.vue";
onMounted(() => {
  initDynamanicRouter(); //主动调用 异步路由
});
</script>

<style lang="scss" scoped>
.mt-20 {
  margin-top: 20px;
}
</style>